(function () {
    var chart = undefined
    var oWebViewInterface = window.nsWebViewInterface;
    function addNativeMsgListener() {
        oWebViewInterface.on('loadCandles', function (candles) {
            display(candles.data, candles.pair)
        });
        oWebViewInterface.on('updateCandles', function (candles) {
            update(candles.data, candles.pair)
        });
    }

    function init() {
        addNativeMsgListener();
    }

    function update(data, pair) {
        var ohlc = [],
        volume = [],
        dataLength = data.length,
        i = 0;

        for (i; i < dataLength; i += 1) {
            const date =  data[i]['timestamp'] * 1000
            ohlc.push([
                date, // the date
                data[i]['open'], // open
                data[i]['high'], // high
                data[i]['low'], // low
                data[i]['close'] // close
            ]);
            volume.push([
                date, // the date
                data[i]['volume'] // the volume
            ]);
        }
        chart.update({
            series: [{
                type: 'candlestick',
                name: pair,
                data: ohlc,
            }, {
                type: 'column',
                name: 'Volume',
                data: volume,
                yAxis: 1,
            }]
        })
    }

    function display(data, pair) {
         // split the data set into ohlc and volume
        var ohlc = [],
        volume = [],
        dataLength = data.length,
        i = 0;

        for (i; i < dataLength; i += 1) {
            const date =  data[i]['timestamp'] * 1000
            ohlc.push([
                date, // the date
                data[i]['open'], // open
                data[i]['high'], // high
                data[i]['low'], // low
                data[i]['close'] // close
            ]);
            volume.push([
                date, // the date
                data[i]['volume'] // the volume
            ]);
        }

        Highcharts.theme = {
            global: {
                useUTC: false
            },
            colors: ['#00CE7D', '#00CE7D', '#E55541', '#00CE7D', '#aaeeee', '#ff0066',
            '#eeaaee', '#00CE7D', '#DF5353', '#00CE7D', '#aaeeee'],
            chart: {
            backgroundColor: {
                linearGradient: { x1: 0, y1: 0, x2: 1, y2: 1 },
                stops: [
                    [0, '#15283F'],
                    [1, '#15283F']
                ]
            },
            style: {
                fontFamily: '\'Unica One\', sans-serif'
            },
            plotBorderColor: '#2B5072',
            },
            title: {
            style: {
                color: '#FFF',
                textTransform: 'uppercase',
                fontSize: '20px'
            }
            },
            subtitle: {
            style: {
                color: '#FFF',
                textTransform: 'uppercase'
            }
            },
            xAxis: {
            gridLineColor: '#2B5072',
            labels: {
                style: {
                    color: '#FFF'
                }
            },
            lineColor: '#2B5072',
            minorGridLineColor: '#42B6F6',
            tickColor: '#2B5072',
            title: {
                style: {
                    color: '#42B6F6'
        
                }
            }
            },
            yAxis: {
            gridLineColor: '#2B5072',
            labels: {
                style: {
                    color: '#FFF'
                }
            },
            lineColor: '#2B5072',
            minorGridLineColor: '#42B6F6',
            tickColor: '#2B5072',
            tickWidth: 1,
            title: {
                style: {
                    color: '#42B6F6'
                }
            }
            },
            tooltip: {
            backgroundColor: 'rgba(0, 0, 0, 0.85)',
            style: {
                color: '#FFF'
            }
            },
            plotOptions: {
            series: {
                dataLabels: {
                    color: '#ccc'
                },
                marker: {
                    lineColor: '#333'
                }
            },
            boxplot: {
                fillColor: '#E55541'
            },
            candlestick: {
                lineColor: '#E55541',
                color: '#E55541',
                upColor: '#00CE7D',
                upLineColor: '#00CE7D'
            },
            errorbar: {
                color: 'white'
            }
            },
            legend: {
            itemStyle: {
                color: '#E0E0E3'
            },
            itemHoverStyle: {
                color: '#FFF'
            },
            itemHiddenStyle: {
                color: '#606063'
            }
            },
            credits: {
            style: {
                color: '#666'
            }
            },
            labels: {
            style: {
                color: '#2B5072'
            }
            },
        
            drilldown: {
            activeAxisLabelStyle: {
                color: '#F0F0F3'
            },
            activeDataLabelStyle: {
                color: '#F0F0F3'
            }
            },
        
            navigation: {
            buttonOptions: {
                symbolStroke: '#DDDDDD',
                theme: {
                    fill: '#505053'
                }
            }
            },
        
            // scroll charts
            rangeSelector: {
            inputEnabled:false,
            buttonTheme: {
                fill: 'transparent',
                stroke: 'transparent',
                style: {
                    color: '#CCC'
                },
                states: {
                    //  hover: {
                    //     fill: '#707073',
                    //     stroke: '#000000',
                    //     style: {
                    //        color: 'white'
                    //     }
                    //  },
                    select: {
                        fill: '#0B84DE',
                        stroke: '#0B84DE',
                        style: {
                        color: 'white'
                        }
                    }
                }
            },
            buttons: [{
                    type: 'minute',
                    count: 15,
                    text: '15m'
                }, {
                    type: 'hour',
                    count: 1,
                    text: '1h'
                }, {
                    type: 'hour',
                    count: 4,
                    text: '4h'
                }, {
                    type: 'all',
                    text: 'All'
                }],
            inputBoxBorderColor: '#505053',
            inputStyle: {
                backgroundColor: '#333',
                color: 'silver'
            },
            labelStyle: {
                color: 'silver'
            }
            },
        
            navigator: {
            handles: {
                backgroundColor: '#666',
                borderColor: '#AAA'
            },
            outlineColor: '#CCC',
            maskFill: 'rgba(255,255,255,0.1)',
            series: {
                color: '#00CE7D',
                lineColor: '#00CE7D'
            },
            xAxis: {
                gridLineColor: '#505053'
            }
            },
        
            scrollbar: {
            barBackgroundColor: '#808083',
            barBorderColor: '#808083',
            buttonArrowColor: '#CCC',
            buttonBackgroundColor: '#606063',
            buttonBorderColor: '#606063',
            rifleColor: '#FFF',
            trackBackgroundColor: '#404043',
            trackBorderColor: '#404043'
            },
        
            // special colors for some of the
            legendBackgroundColor: 'rgba(0, 0, 0, 0.5)',
            background2: '#505053',
            dataLabelsColor: '#B0B0B3',
            textColor: '#C0C0C0',
            contrastTextColor: '#F0F0F3',
            maskColor: 'rgba(255,255,255,0.3)'
        };
        // Apply the theme
        Highcharts.setOptions(Highcharts.theme);



        // create the chart
        chart = Highcharts.stockChart('container', {

            // rangeSelector: {
            //     selected: 1
            // },

            yAxis: [{
                // labels: {
                //     align: 'right',
                //     x: -3
                // },
                // title: {
                //     text: 'OHLC'
                // },
                height: '60%',
                lineWidth: 1,
                resize: {
                    enabled: true
                }
            }, {
                // labels: {
                //     align: 'right',
                //     x: -3
                // },
                // title: {
                //     text: 'Volume'
                // },
                top: '65%',
                height: '35%',
                offset: 0,
                lineWidth: 1
            }],

            tooltip: {
                split: false
            },

            series: [{
                type: 'candlestick',
                name: pair,
                data: ohlc,
                // dataGrouping: {
                //     units: groupingUnits
                // }
            }, {
                type: 'column',
                name: 'Volume',
                data: volume,
                yAxis: 1,
                // dataGrouping: {
                //     units: groupingUnits
                // }
            }],
        });

    }
    init();
})();